<template>
  <div class="user">
    <template v-if="username">
      欢迎您, <span class="username"> {{ username }} </span>
      [
      <nuxt-link to="/exit">
        退出
      </nuxt-link>
      ]
    </template>
    <template v-else>
      <nuxt-link to="/login" class="login">
        立即登陆
      </nuxt-link>
      <nuxt-link to="/register" class="register">
        注册
      </nuxt-link>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: ''
    }
  },
  async mounted () {
    const res = await this.$axios.get('/users/getUser')
    // eslint-disable-next-line no-console
    console.log(res)
    if (res.status !== 200) {
      this.$message.error('服务器出错了')
      return false
    }
    this.username = decodeURIComponent(res.data.username)
  }
}
</script>

<style lang="scss">
.register {
  margin-left: 10px;
  color: #999 !important;
  &:hover{
    color: #31BBAC!important;
  }
}
.username {
  margin-right: 10px;
  color: #31bbac;
}
</style>
